<template>
  <div>
        <div class="headerBox">
            <div class="line"></div>
            <div class="title">清洁前准备</div>
      </div>
      <div class="tableBox">
                  <div class="tr per100 soildTop display-fx-center">
                    <div class="td pre33">
                          <span>是否地漏检查</span>
                    </div>
                    <div class="full pre33" style="border-right:none">{{ filtration(infoData.inspect)}}</div>
                    <div class="full pre33 display-fx-center justify-center">
                          <el-image v-if="infoData.noticeUrl" class="image" fit="cover" :src="infoData.inspectUrl" :preview-src-list="[infoData.inspectUrl]"></el-image>  
                    </div>
                </div>
      </div>
        <div class="tableBox">
                  <div class="tr per100 display-fx-center">
                    <div class="td pre33">
                          <span>是否停水通知</span>
                    </div>
                    <div class="full pre33" style="border-right:none">{{filtration(infoData.notice)}}</div>
                    <div class="full pre33 display-fx-center justify-center">
                            <el-image v-if="infoData.noticeUrl" class="image" fit="cover" :src="infoData.noticeUrl" :preview-src-list="[infoData.noticeUrl]"></el-image>  
                    </div>
                </div>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
         infoData:{}
      };
    },
    created() {
        this.infoData = this.$store.state.drinkingWater.cleanDetail
    },
    methods: {
        filtration(item){
                if(item === '0'){
                      return '是'
                } else if(item === '1'){
                      return '否'
                }else{
                    return ''
                }    
        }
    }
  };
</script>
<style lang="scss" scoped>
         .display-fx-center{
             display: flex;
             align-items: center;
         }
         .justify-center{
            justify-content: center;
         }
         .per100{
             width: 100%!important;
         }
         .per50{
            width: 50%!important;
         }
         .pre33{
             width: 33.333333333%!important;
         }
         .soildTop{
             border-top:solid 1px  #D3D8E2;
         }
          .tableBox{
                  font-size: 14px;
                  @extend .display-fx-center;
                  .tr{
                      width: 50%;
                      height: 50px;
                      display: flex;
                      line-height: 50px;
                      .td{
                       width: 120px;
                       height: 100%;
                       border: solid 1px #D3D8E2;
                       background: #F4F8FF;
                       padding: 0 8px;
                       border-top:none;
                       border-right:none;
                       color: #797C84;
                       flex-shrink: 0;         
                   }
                   .full{
                         width: 100%;
                         height: 100%;
                         border: solid 1px #D3D8E2;
                         border-top:none;  
                         padding: 0 10px;             
                      }
                    .upload{
                      text-align:center;
                      color:#5D85FF;
                      cursor: pointer;
                    }
                    .image{
                        width: 100px;
                        height: 35px;
                    }
                  } 
    
            }
           .headerBox{
                font-size: 16px;
                color: #484848;
                font-weight: bold;
                margin-top:40px;
                margin-bottom:15px;
                @extend .display-fx-center;
                .line{
                  width: 4px;
                  height: 12px;
                  background: #5D85FF;
                  border-radius: 6px 6px 6px 6px;
                  margin-right:6px;
                }
             }
          
</style>
